<template>
  <div class="product__box">
    <div class="product">
      <div class="product__title">{{ shopName }}</div>
      <div class="product__item__box">
        <template v-for="(item, index) in cartList" :key="item._id">
          <Commodity
            :show="true"
            :item="item"
            :product__item__img__cart="true"
            :product__item__price__cart="true"
            :number="true"
            :year="true"
            v-if="index < 2 || overShow"
          />
        </template>
        <div class="more" v-if="num > 2">
          <div class="more__content" @click="handleOverShow">
            共计{{ count }}件/1.4kg
            <div
              class="more__content__icon iconfont"
              v-html="!overShow ? '&#xe6b9;' : '&#xe60a;'"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Commodity from "../../components/commodity/Commodity.vue";
import { getSettleList } from "../../components/cartCommon/commonCartEffect";
import { ref } from "vue";

const useHandleOverShow = () => {
  const overShow = ref(false);
  const handleOverShow = () => {
    overShow.value = !overShow.value;
  };
  return { overShow, handleOverShow };
};
export default {
  components: { Commodity },

  setup() {
    const { cartList, shopName, num, count } = getSettleList();
    const { overShow, handleOverShow } = useHandleOverShow();
    return { cartList, shopName, overShow, handleOverShow, num, count };
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/viriables.scss";
.product__box {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.59rem;
  top: 1.96rem;
}
.product__item__box {
  position: absolute;
  left: 0.18rem;
  right: 0.18rem;
  bottom: 0.01rem;
  top: 0.38rem;
  overflow-y: scroll;
  border-radius: 0.04rem;
}
.product {
  background-color: $color-fff;
  margin: 0 0.18rem 0;
  padding: 0.16rem;
  border-radius: 0.04rem;
  transition: all 0.3s;
  &__title {
    font-size: 0.16rem;
    color: #333;
    line-height: 0.22rem;
    font-weight: 600;
  }
  &__item {
    border: none;
    padding: 0;
    background-color: $color-fff;
    padding: 0 0.16rem;

    &:last-child {
      border-bottom-left-radius: 0.04rem;
      border-bottom-right-radius: 0.04rem;
    }
  }
}
.more {
  padding: 0.16rem;
  background-color: $color-fff;
  border-bottom-left-radius: 0.04rem;
  border-bottom-right-radius: 0.04rem;
  &__content {
    height: 0.28rem;
    background-color: $search-bgColor;
    color: $color-999;
    font-size: 0.14rem;
    text-align: center;
    line-height: 0.28rem;
    &__icon {
      transform: rotate(90deg);
      display: inline-block;
      font-size: 0.18rem;
      margin-left: 0.08rem;
      transform: translateY(0.02rem);
    }
  }
}
</style>